<template>
  <div class="department-index">
    <SearchForm placeholder="搜索部门名称" @search="search" />
    <div class="list-content">
      <scroll-view class="scroll-view" scroll-y :refresher-triggered="isReloading" @refresherrefresh="refresh" @scrolltolower="loadMore">
        <!--refresher-enabled-->
        <view class="empty" v-if="isEmpty">
          <text>暂无数据</text>
        </view>
        <uni-swipe-action v-if="!isEmpty">
          <!-- 使用插槽 （请自行给定插槽内容宽度）-->
          <uni-swipe-action-item v-for="(data, index) in dataList" :key="index">
            <div class="data-item">
              <div @click="listItemClick(data)">
                <p class="name" v-text="data.name" />
                <span class="num" v-text="data.count" />
              </div>
            </div>
          </uni-swipe-action-item>
        </uni-swipe-action>
      </scroll-view>
    </div>
  </div>
</template>

<script>
  import SearchForm from '../../components/common/SearchForm';
  import { getDepartment } from '../../api/department';
  
  export default {
    name: 'DepartmentIndex',
    components: {
      SearchForm,
    },
    props: {},
    data() {
      return {
        isLoading: false,
        isReloading: false,
        isEmpty: false,
        isMore: true,
        dataList: [],
        organId: '',
        organName: '',
        keywords: '',
        pageData: {
          pageNum: 1,
          pageSize: 20,
        },
      };
    },
    computed: {},
    mounted() {
    },
    created() {
    },
    methods: {
      async getData() {
        this.isLoading = true;
        const param = {
          directCode: this.organId,
          deptName: this.keywords,
          ...this.pageData,
        };
        const res = await getDepartment(param);
        if (res.code === 200 && res.rows) {
          const dataList = res.rows.map((val) => {
            return { ...val, value: val.deptId, name: val.deptName };
          });
          this.dataList = [ ...this.dataList, ...dataList ];
          this.isMore = res.total > this.dataList.length;
          this.isEmpty = this.dataList.length < 1;
        }
        this.isLoading = false;
      },
      loadMore() {
        if (this.isMore && !this.isLoading) {
          this.pageData.pageNum += 1;
          this.getData();
        }
      },
      refresh() {
        console.log('refresh');
      },
      listItemClick(data) {
        console.log('listItemClick');
        const { organName, organId } = this;
        this.$pageTo({
          url: `/pages/staff/index?organName=${organName}&organId=${organId}&deptId=${data.deptId}&deptName=${data.deptName}`,
        });
      },
      search({ keywords }) {
        this.dataList = [];
        this.pageData.pageNum = 1;
        this.isMore = true;
        this.isEmpty = false;
        this.keywords = keywords;
        this.getData();
      },
    },
    onLoad(data) {
      this.organId = data.organId;
      this.organName = data.organName;
      this.getData();
    },
  };
</script>

<style lang="scss" scoped>
  @import "../../components/common/search-form";
  @import "../../components/common/scroll-view";
  
  .department-index {
    display: flex;
    height: 100vh;
    overflow: hidden;
    flex-direction: column;
    background-color: #f3f5f7;
    .list-content {
      flex: 1;
      overflow: hidden;
      .data-item {
        padding: 8px 15px;
        > div {
          background-color: white;
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: 15px;
          border-radius: 5px;
          .name {
            font-size: 14px;
            color: black;
            font-weight: 600;
            line-height: 1.5;
            flex: 1;
          }
          .num {
            white-space: nowrap;
            color: #333333;
            font-size: 14px;
            line-height: 1;
          }
        }
      }
    }
    
  }
</style>
